<template>
  <div
    class="ui-popup-select"
    :class="{'is-disabled': disabled}"
  >
    <div class="ui-popup-select__handle" @click="handleHandleClick">
      <template v-if="loading">
        <div class="ui-popup-select__loading">
          <ui-loading size="mini"></ui-loading> 数据加载中...
        </div>
      </template>
      <template v-else>
        <div class="ui-popup-select__value" v-if="!isEmpty">
          <slot name="value"></slot>
          <span class="ui-popup-select__arrow el-input__icon el-icon-arrow-up"></span>
          <span class="ui-popup-select__clear el-input__icon el-icon-circle-close" title="清除" @click.stop="handleClearClick"></span>
        </div>
        <template v-else>
          <div class="ui-popup-select__placeholder">{{ placeholder }}</div>
          <div class="ui-popup-select__arrow"></div>
        </template>
      </template>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import Emitter from '../../utils/emitter'
 
export default {
  name: 'UiPopupSelect',
  mixins: [Emitter],
  props: {
    value: {
      type: [String, Number, Object, Array]
    },
    placeholder: {
      type: String,
      default: '选择'
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isEmpty () {
      return this.value === null || this.value === undefined || this.value === '' || (Array.isArray(this.value) && this.value.length === 0)
    }
  },
  watch: {
    value () {
      this.dispatch('ElFormItem', 'el.form.change', this.value)
    }
  },
  methods: {
    handleHandleClick () {
      if (this.disabled) {
        return
      }
      this.$emit('click')
    },
    handleClearClick () {
      this.$emit('input', null)
    }
  }
}
</script>
<style lang="less">
.ui-popup-select {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
  &:not(.is-disabled):hover {
    .ui-popup-select__handle{
      border-color: #C0C4CC;
    }
  }
  &.is-disabled {
    .ui-popup-select__handle{
      background-color: #f3f3f3;
      color: #999;
      cursor: not-allowed;
    }
  }
  &:not(.is-disabled):hover {
    .ui-popup-select__value{
      .ui-popup-select__arrow{
        display: none;
      }
      .ui-popup-select__clear{
        display: block;
      }
    }
  }
}
.ui-popup-select__handle{
  display: block;
  min-height: 26px;
  line-height: 26px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 2px 30px 2px 12px;
  position: relative;
  transition: all .25s;
  cursor: pointer;
}
.ui-popup-select__arrow{
  position: absolute;
  top: 50%;
  right: 5px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  transform: translateY(-50%) rotate(180deg);
  color: #c0c4cc;
  transition: all .25s;
  &:after, &:before {
    content: '';
    background-color: #ddd;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
  }
  &:after {
    width: 12px;
    height: 2px;
  }
  &:before {
    height: 12px;
    width: 2px;
  }
}
.ui-popup-select__clear{
  position: absolute;
  top: 50%;
  right: 5px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  transform: translateY(-50%) rotate(180deg);
  color: #c0c4cc;
  transition: all .25s;
  display: none;
  &:hover {
    color: #333;
  }
}
.ui-popup-select__placeholder{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #c3c6ce;
  z-index: 3;
  height: 24px;
  line-height: 24px;
}
.ui-popup-select__loading{
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
